<template>
	<view>
		<view class="content">
			<view class="title">
				<text>您好！请选择</text>
			</view>

			<view class="older" @tap="older()">
				<view class="kind">
					<text>我是父母</text>
					<view class="icon">
						<uni-icons type="arrowright" size="28" color="white"></uni-icons>
					</view>
				</view>


			</view>

			<view class="kid" @tap="kid()">
				<view class="kind">
					<text>我是子女</text>
				</view>
				<view class="icon">
					<uni-icons type="arrowright" size="28" color="white"></uni-icons>
				</view>
			</view>

			<view class="volunteer" @tap="volunteer()">
				<view class="kind">
					<text>我是志愿者</text>
				</view>
				<view class="icon">
					<uni-icons type="arrowright" size="28" color="white"></uni-icons>
				</view>
			</view>

			<view class="communitymManagers" @tap="communitymManagers()">
				<view class="kind">
					<text>我是社区管理者</text>
					
				</view>
				<view class="icon">
					<uni-icons type="arrowright" size="28" color="white"></uni-icons>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "status",
		data() {
			return {

			};
		},
		methods: {
			older() {
				console.log('older');

				uni.navigateTo({
					url: '../../pages/login/login?kind=' + 'older'
				})
			},
			kid() {
				console.log('kid');
				uni.navigateTo({
					url: '../../pages/login/login?kind=' + 'kid'
				})
			},
			volunteer() {
				console.log('volunteer');
				uni.navigateTo({
					url: '../../pages/login/login?kind=' + 'volunteer'
				})
			},
			communitymManagers() {
				console.log('communitymManagers');
				uni.navigateTo({
					url: '../../pages/login/login?kind=' + 'communitymManagers'
				})
			}
		}
	}
</script>

<style>
	/* 	.page{
		height: 100%;
	} */
	.content {

		height: 100vh;
		width: 100%;
		background-color: #ffffff;

		/* 	display: flex;
		flex-direction: column;
		justify-content: center; */
	}

	.title {
		height: 20%;
		width: 80%;
		text-align: center;
		margin: 0 auto;
		font-size: 85rpx;
		font-weight: bold;
		position: relative;
		top: 8%;
	}

	.older {
		height: 12%;
		width: 85%;
		text-align: center;
		position: relative;
		top: 10%;
		/* flex: auto; */
		margin: 0 auto;
		background-color: #F99B55;
		border-radius: 30px;
		color: #ffffff;

	}

	.kid {
		height: 12%;
		width: 85%;
		text-align: center;
		margin: 0 auto;
		position: relative;
		top: 13%;
		/* flex: auto; */
		background-color: #F168BA;
		border-radius: 30px;
		color: #ffffff;
	}

	.volunteer {
		height: 12%;
		width: 85%;
		text-align: center;
		position: relative;
		top: 16%;
		margin: 0 auto;
		/* flex: auto; */
		background-color: #F16767;
		border-radius: 30px;
		color: #ffffff;
	}

	.communitymManagers {
		height: 12%;
		width: 85%;
		text-align: center;
		position: relative;
		top: 19%;
		margin: 0 auto;
		/* flex: auto; */
		background-color: #4EB8F6;
		border-radius: 30px;
		color: #ffffff;

	}

	.kind {
		width: 100%;
		/* margin: 0 auto; */
		padding-top: 6%;
		font-size: 28px;
		/* font-weight: bold; */
		/* text-align: center; */


	}

	.icon {
		/* height: 10%; */
		width: 5%;
		/* margin-left: auto; */
		position: absolute;
		/* float: right; */
		/* margin-top: -5%; */
		/* padding-bottom: -5%; */
		top: 30%;
		right: 10%;
		/* right: 0; */
		/* padding-right: 0; */

	}
</style>
